<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<% request.setAttribute("allowed", "Consultar Sedes, Areas y Edificios");%>
<%@ include file='../Templates/security.jsp' %>

<h1 class="title">Gestión de Sedes</h1>
<hr>
<p class="meta"></p>
<div id="entry">
    <h2>Consultar Sedes</h2>
    <br>
    <div id="error" class="error"></div>
    <div id="consultaSedes">
        <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"  >
            <thead>
                <tr>
                    <th class="nosort"><h5>Nombre</h5></th>
                    <th><h5>Teléfono</h5></th>
                    <th><h5>Dirección</h5></th>
                    <th><h5>Detalles</h5></th>
                    <th><h5>Modificar</h5></th>
                    <th><h5 class="detalle">Descripcion</h5></th>
                    <!--<th><h5>Estado</h5></th>-->
                </tr>
            </thead>
            <tbody id="resultado"></tbody>
        </table>
        <html:button property="" value="Consultar" styleId="consultarForm" onclick="consultarSedes()" styleClass="oculta"/>
        <html:reset property="" styleId="resetForm" value="Limpiar" styleClass="oculta"/>
        <div style="clear: both;">&nbsp;</div>
        <%@ include file="../Templates/paginasTabla.jsp" %>
        <div id="detallesSede"></div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        consultarSedes();
        $('#detallesSede').dialog({
            autoOpen: false,
            title: 'Detalles de la Sede',
            hide: "explode"
        });
        $('#consultaSedes').hide();
    });

    function consultarSedes(){
        limit = $('#limit').val();
        $.getJSON("consultarSedes.do",{limit: limit, offset: offset, order: order, asc:asc},
        function(data) {
            if(data.error){
                actionError(data.error);
                return;
            }
            $('#resultado').html("");
            $.each(data.sedes , function(i,item){
                if ( (i % 2) == 0) fila = $("<tr bgcolor='#fff' id='sede_"+item.nombre+"' class='sedeRow'>");
                else fila = $("<tr bgcolor='#ecf2f6' id='sede_"+item.nombre+"' class='sedeRow'>");

                fila.append($("<td>").append(item.nombre));
                fila.append($("<td>").append(item.telefono));
                fila.append($("<td>").append(item.direccion));

                det = "<img src='style/images/detalles.png' alt='Ver Detalles' width='20' height='20' class='showDetails'>";
                fila.append($("<td>").append(det));

                //if (item.estado_sede == "t"){
                mod = "<img onclick='return sedeM(\""+item.nombre+"\");' src='style/images/table_edit1.png' alt='Modificar Sede' width='20' height='20'>";
                fila.append($("<td>").append(mod));
                //}

                detalle = "<p><b>Descripcion: </b>"+item.descripcion+"</p>";
                fila.append($("<td id='detalleSede_"+item.nombre+"' class='detalle'>").append(detalle));

                $('#resultado').append(fila);
            });
            $('.detalle').hide();

            $('.showDetails').click(function(){
                sede = $(this).parent().parent().attr('id').replace('sede_','');
                detalle = $('#detalleSede_'+sede).html();
                $('#detallesSede').html(detalle);
                $('#detallesSede').dialog("open");
            });
            tam = data.tam
            if(tam==0){
                $("#obs").html('<h4>No hay resultados que coincidan con los parametros dados.</h4>');
                $("#consultaSedes").hide();
            } else {
                $("#obs").html('OBSERVACIÓN: Para ordenar la tabla por un campo específico, presionar el nombre de la columna.');
                $("#currentpage").html((offset/limit)+1);
                $("#pagelimit").html(Math.ceil(tam/limit));
                $("#consultaSedes").show();
            }
        });
    }
    
    function consultarInspeccionTodo(){
        $('#resetForm').click();
        consultarInspeccion();
    }
    
</script>